<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>志愿服务 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        /* 服务流程指示器 */
        .process-indicator {
            background: white;
            margin: 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .process-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        
        .process-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        
        .process-step {
            text-align: center;
            flex: 1;
            position: relative;
            z-index: 2;
        }
        
        .step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 18px;
            background: #f0f2f5;
            color: #999;
            transition: all 0.3s;
        }
        
        .step-icon.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .step-icon.completed {
            background: #52c41a;
            color: white;
        }
        
        .step-text {
            font-size: 12px;
            color: #666;
        }
        
        .step-text.active {
            color: #ff6b00;
            font-weight: bold;
        }
        
        .process-line {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            height: 2px;
            background: #f0f2f5;
            z-index: 1;
        }
        
        .process-line::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 25%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            transition: width 0.3s;
        }
        
        /* 服务分类 */
        .service-categories {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .category-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .category-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .category-item {
            text-align: center;
            padding: 15px 10px;
            border-radius: 12px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .category-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .category-item.selected {
            background: linear-gradient(135deg, #ff6b0020, #ffa72620);
            border: 2px solid #ff6b00;
        }
        
        .category-icon {
            font-size: 24px;
            margin-bottom: 8px;
            display: block;
        }
        
        .category-name {
            font-size: 12px;
            color: #333;
            font-weight: bold;
        }
        
        /* 服务申请表单 */
        .service-form {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .form-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-label.required::after {
            content: '*';
            color: #ff4d4f;
            margin-left: 4px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .form-input:focus {
            border-color: #ff6b00;
        }
        
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 8px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 32px;
        }
        
        .time-picker {
            display: flex;
            gap: 10px;
        }
        
        .time-input {
            flex: 1;
        }
        
        /* 我的申请 */
        .my-requests {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .requests-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .request-item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .request-item:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .request-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        
        .request-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .request-status {
            padding: 4px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .status-pending {
            background: #fff7e6;
            color: #d46b08;
        }
        
        .status-assigned {
            background: #e6f7ff;
            color: #0958d9;
        }
        
        .status-progress {
            background: #f6ffed;
            color: #389e0d;
        }
        
        .status-completed {
            background: #f0f0f0;
            color: #595959;
        }
        
        .request-info {
            font-size: 12px;
            color: #666;
            line-height: 1.6;
        }
        
        .request-time {
            font-size: 11px;
            color: #999;
            margin-top: 8px;
        }
        
        /* 按钮 */
        .btn {
            padding: 12px 24px;
            border-radius: 20px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
            display: inline-block;
            text-decoration: none;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .btn-secondary {
            background: #f0f2f5;
            color: #ff6b00;
        }
        
        .btn-block {
            width: 100%;
            margin-top: 20px;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
        
        /* 弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin: 20px;
            max-width: 300px;
            width: 100%;
            text-align: center;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .modal-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .modal-actions {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">志愿服务</span>
        </div>
    </div>
    
    <!-- 服务流程指示器 -->
    <div class="process-indicator">
        <div class="process-title">📋 服务流程</div>
        <div class="process-steps">
            <div class="process-line"></div>
            <div class="process-step">
                <div class="step-icon active">1</div>
                <div class="step-text active">点单</div>
            </div>
            <div class="process-step">
                <div class="step-icon">2</div>
                <div class="step-text">派单</div>
            </div>
            <div class="process-step">
                <div class="step-icon">3</div>
                <div class="step-text">接单</div>
            </div>
            <div class="process-step">
                <div class="step-icon">4</div>
                <div class="step-text">评单</div>
            </div>
        </div>
    </div>
    
    <!-- 服务分类 -->
    <div class="service-categories">
        <div class="category-title">🏷️ 选择服务类型</div>
        <div class="category-grid">
            <div class="category-item" onclick="selectCategory(this, 'elderly')">
                <span class="category-icon">👴</span>
                <div class="category-name">敬老服务</div>
            </div>
            <div class="category-item" onclick="selectCategory(this, 'education')">
                <span class="category-icon">📚</span>
                <div class="category-name">教育辅导</div>
            </div>
            <div class="category-item" onclick="selectCategory(this, 'medical')">
                <span class="category-icon">🏥</span>
                <div class="category-name">医疗健康</div>
            </div>
            <div class="category-item" onclick="selectCategory(this, 'environment')">
                <span class="category-icon">🌱</span>
                <div class="category-name">环保服务</div>
            </div>
            <div class="category-item" onclick="selectCategory(this, 'repair')">
                <span class="category-icon">🔧</span>
                <div class="category-name">维修服务</div>
            </div>
            <div class="category-item" onclick="selectCategory(this, 'other')">
                <span class="category-icon">📝</span>
                <div class="category-name">其他服务</div>
            </div>
        </div>
    </div>
    
    <!-- 服务申请表单 -->
    <div class="service-form">
        <div class="form-title">📝 填写服务申请</div>
        <form id="serviceForm">
            <div class="form-group">
                <label class="form-label required">服务标题</label>
                <input type="text" class="form-input" name="title" placeholder="请简要描述您需要的服务" required>
            </div>
            
            <div class="form-group">
                <label class="form-label required">详细描述</label>
                <textarea class="form-input form-textarea" name="description" placeholder="请详细描述您的服务需求，包括具体要求、时间地点等" required></textarea>
            </div>
            
            <div class="form-group">
                <label class="form-label required">联系人</label>
                <input type="text" class="form-input" name="contact" placeholder="请输入您的姓名" required>
            </div>
            
            <div class="form-group">
                <label class="form-label required">联系电话</label>
                <input type="tel" class="form-input" name="phone" placeholder="请输入您的联系电话" required>
            </div>
            
            <div class="form-group">
                <label class="form-label required">服务地址</label>
                <input type="text" class="form-input" name="address" placeholder="请输入服务地址" required>
            </div>
            
            <div class="form-group">
                <label class="form-label required">期望时间</label>
                <div class="time-picker">
                    <input type="date" class="form-input time-input" name="date" required>
                    <input type="time" class="form-input time-input" name="time" required>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">紧急程度</label>
                <select class="form-input form-select" name="urgency">
                    <option value="normal">普通</option>
                    <option value="urgent">紧急</option>
                    <option value="very-urgent">非常紧急</option>
                </select>
            </div>
            
            <button type="submit" class="btn btn-primary btn-block">📤 提交申请</button>
        </form>
    </div>
    
    <!-- 我的申请 -->
    <div class="my-requests">
        <div class="requests-title">
            📋 我的申请
            <span style="font-size: 12px; color: #999;">查看全部 ></span>
        </div>
        
        <div class="request-item" onclick="viewRequestDetail(1)">
            <div class="request-header">
                <div class="request-title">家电维修服务</div>
                <span class="request-status status-progress">服务中</span>
            </div>
            <div class="request-info">
                志愿者：李师傅 | 电话：138****5678<br>
                地址：建设路123号 | 预约时间：今天 14:00
            </div>
            <div class="request-time">申请时间：2024-01-15 09:30</div>
        </div>
        
        <div class="request-item" onclick="viewRequestDetail(2)">
            <div class="request-header">
                <div class="request-title">老人陪护服务</div>
                <span class="request-status status-assigned">已派单</span>
            </div>
            <div class="request-info">
                等待志愿者确认接单...<br>
                地址：文明路456号 | 预约时间：明天 10:00
            </div>
            <div class="request-time">申请时间：2024-01-14 16:20</div>
        </div>
        
        <div class="request-item" onclick="viewRequestDetail(3)">
            <div class="request-header">
                <div class="request-title">课业辅导服务</div>
                <span class="request-status status-completed">已完成</span>
            </div>
            <div class="request-info">
                服务已完成，感谢您的使用！<br>
                志愿者：张老师 | 服务时长：2小时
            </div>
            <div class="request-time">完成时间：2024-01-10 18:00</div>
        </div>
    </div>
    
    <!-- 弹窗 -->
    <div class="modal" id="confirmModal">
        <div class="modal-content">
            <div class="modal-title">确认提交</div>
            <div class="modal-message">确定要提交这个服务申请吗？</div>
            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="submitRequest()">确定</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        let selectedCategory = '';
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 选择服务分类
        function selectCategory(element, category) {
            document.querySelectorAll('.category-item').forEach(item => {
                item.classList.remove('selected');
            });
            element.classList.add('selected');
            selectedCategory = category;
        }
        
        // 表单提交
        document.getElementById('serviceForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!selectedCategory) {
                alert('请先选择服务类型');
                return;
            }
            
            document.getElementById('confirmModal').style.display = 'flex';
        });
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('confirmModal').style.display = 'none';
        }
        
        // 提交申请
        function submitRequest() {
            closeModal();
            
            // 模拟提交过程
            const form = document.getElementById('serviceForm');
            const formData = new FormData(form);
            
            // 这里可以添加实际的提交逻辑
            console.log('提交的服务申请：', {
                category: selectedCategory,
                title: formData.get('title'),
                description: formData.get('description'),
                contact: formData.get('contact'),
                phone: formData.get('phone'),
                address: formData.get('address'),
                date: formData.get('date'),
                time: formData.get('time'),
                urgency: formData.get('urgency')
            });
            
            alert('服务申请提交成功！\n我们会尽快为您安排志愿者。');
            
            // 重置表单
            form.reset();
            selectedCategory = '';
            document.querySelectorAll('.category-item').forEach(item => {
                item.classList.remove('selected');
            });
        }
        
        // 查看申请详情
        function viewRequestDetail(id) {
            alert('查看申请详情 ID: ' + id + '\n\n功能开发中...');
        }
        
        // 设置默认日期
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(tomorrow.getDate() + 1);
            
            document.querySelector('input[name="date"]').value = tomorrow.toISOString().split('T')[0];
            document.querySelector('input[name="time"]').value = '09:00';
        });
    </script>
</body>
</html>